<template>
  <el-card shadow="always" class="advertise">
    <h4>
      <svg-icon
        name="notice"
        color="#f56c6c"
        class="svg"
        width="20"
        height="20"
      ></svg-icon>
      <span>公告信息</span>
    </h4>
    <div class="info">兄弟们码云继续点小星星</div>
  </el-card>
</template>
<script setup></script>
<style lang="scss" scoped>
@keyframes infoShadow {
  0% {
    box-shadow: inset 0px 0px 5px 1px $strong; //inset设置为内阴影
  }
  100% {
    box-shadow: inset 0px 0px 8px 5px $strong; //inset设置为内阴影
  }
}

:deep .el-card__body {
  padding: 0;
}
// 公告栏
.advertise {
  flex: 1;
  // margin-top: 20px;
  transition: all 0.3s;
  h4 {
    padding: 10px;
    display: flex;
    .svg {
      :deep svg {
        vertical-align: -2px;
        animation: scaleSvg 2s infinite ease alternate; //动画名、时间、循环、动画曲线、反方向
      }
    }
    span {
      margin-left: 10px;
    }
  }
  &:hover {
    box-shadow: 1px 1px 10px 5px $shadowcolor; //水平、垂直阴影、模糊大小、阴影大小
  }
  .info {
    font-size: 14px;
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    background: #fbf5f1;
    padding: 10px;
    animation: infoShadow 2s infinite ease alternate;
  }
  :deep .el-card__body {
    box-sizing: border-box;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
